<template>
  <div>
    <div class="side-search-container">
      <div class="blue-line mb-15">{{ $t('video.winList') }}</div>
      <a-input-search style="width: 200px"  :placeholder="$t('other.stationAndMonitor')" enter-button v-model:value.trim="searchQuery" @search="loadData(true)" />
    </div>
    <a-spin :spinning="loading">
      <div class="video-side-container" @scroll="props.videoType=='one'? scrollBottom : null">
        <div v-if="props.videoType=='one'">
          <a-row v-for="(item, index) in listData" :key="index" :class="['list-card', {'active-card': selectMakeId == item.id }]" @click="onCardClick( item, index)"> 
            <a-col class="mb-2" :span="24">
              <div ><b class="break-all">【{{item.lineStationNo}}】</b></div>
            </a-col> 
            <a-col class="one-line" :span="24">
              <div>{{ $t('video.monitorCode') }}：{{item.monitorCode}}</div>
            </a-col>
          </a-row>
        </div>
        <div v-else>
          <a-row v-for="(item, index) in pageSizeAry" :key="index" :class="['list-card', {'active-card': currentPage == index+1}]" @click="onCardClick(item, index +1 )"> 
            <a-col class="mb-2" :span="24"> 
              <div ><b class="break-all">【{{ $t('video.first') }}{{index+1}}{{ $t('common.page') }}】</b></div>
            </a-col> 
            <a-col class="one-line" v-if="false"> 
              <div >101-6、102-1、102-2、102-4-2</div>
            </a-col>
          </a-row>
        </div>
        <a-empty v-if="!listData.length" class="mt-50" />
      </div>
    </a-spin>
  </div>

</template>
<script setup name="sideCard">
import axios from '@/utils/request'
import { onBeforeMount, ref } from 'vue'  
const props = defineProps({  
  videoType: {
    type: String,
    default: () => 'one'
  }, 
})
const emits = defineEmits(['onSelect'])
let listData = ref([])
let currentPage = ref(1)
let selectMakeId = ref(null)
let loading = ref(false) 
let noMore = ref(false)
let searchQuery = ref() 
let pageSizeAry = ref([])
let totalNo= ref(0)
const getQueryParams = () => {
  console.log('=====props.videoType===============================', props.videoType); 
  return {
    pageNo: currentPage.value,
    pageSize: props.videoType == 'one' ? 20 : 999999,
    query: searchQuery.value
  }
}
const loadData = async (reset) => {
  console.log("🚀 ~ file: makeListSide.vue ~ line 70 ~ loadData ~ reset", reset)
  if (reset) {
    noMore.value = false
    currentPage.value = 1
  } 
  let params = getQueryParams()
  // 查询条件
  loading.value = true
  try {
    let res = await axios.postAction('/api/monitor/video/page', params)
    if (res.success) {
      if (res.data) {
        totalNo.value = res.data.total 
        if (reset) {
          listData.value = res.data.list || []
          if (listData.value.length ) {
            initChose()
          } 
        } else {
          listData.value = [...listData.value, ...res.data.list]
        }
        noMore.value = listData.value.length >= res.data.total 
      } else {
        if (reset) listData.value = []
        noMore.value = true 
        selectMakeId.value = null
        emits('onSelect', { selectMakeId: null, moProcVersionVOList: [] })
      }
    }
    loading.value = false
  } catch {
    loading.value = false
  }
}
const initChose = async () => {
  if(props.videoType == 'one') {
    selectMakeId.value = listData.value[0].id
    emits('onSelect', listData.value[0]) 
  } else { 
    pageSizeAry.value = Array.from(Array(Math.ceil(totalNo.value /4)), (v, k) => k)     
    emits('onSelect', getFourVideoInfo())
  }
}
const getFourVideoInfo = () => {  
  let endLength = currentPage.value *4 > totalNo.value ? totalNo.value :  currentPage.value *4 
  return listData.value.slice((currentPage.value-1)*4, endLength)
}
const scrollBottom = async (e) => {
  const { scrollTop, scrollHeight, clientHeight } = e.srcElement
  // 滚动距离顶部高度 + 可视区域高度 >= 滚动内容高度，说明滚动到底
  if (scrollTop + clientHeight >= scrollHeight) {
    if (noMore.value) return
    currentPage.value++
    await loadData()
  }
} 
const onCardClick = (record, index) => {
  if(props.videoType == 'one') { 
    selectMakeId.value = record.id
    emits('onSelect', record )
  } else {
    currentPage.value = index  
    emits('onSelect', getFourVideoInfo())
  }
}
defineExpose({
  loadData,
  searchQuery
})
onBeforeMount(() => {
  loadData(true)
})
</script>
